<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>芭比粉登录页</title>
	</head>
	<style>
		body {
		    height: 100vh;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    background-color: #e8e8e8;
		}
		
		.container {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    text-align: center;
		}
		
		.form_area {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    flex-direction: column;
		    background-color: #EDDCD9;
		    height: auto;
		    width: auto;
		    border: 2px solid #264143;
		    border-radius: 20px;
		    box-shadow: 3px 4px 0px 1px #E99F4C;
		}
		
		.title {
		    color: #264143;
		    font-weight: 900;
		    font-size: 1.5em;
		    margin-top: 20px;
		}
		
		.sub_title {
		    font-weight: 600;
		    margin: 5px 0;
		}
		
		.form_group {
		    display: flex;
		    flex-direction: column;
		    align-items: baseline;
		    margin: 10px;
		}
		
		.form_style {
		    outline: none;
		    border: 2px solid #264143;
		    box-shadow: 3px 4px 0px 1px #E99F4C;
		    width: 290px;
		    padding: 12px 10px;
		    border-radius: 4px;
		    font-size: 15px;
		}
		
		.form_style:focus,
		.btn:focus {
		    transform: translateY(4px);
		    box-shadow: 1px 2px 0px 0px #E99F4C;
		}
		
		.btn {
		    padding: 15px;
		    margin: 25px 0px;
		    width: 290px;
		    font-size: 15px;
		    background: #DE5499;
		    border-radius: 10px;
		    font-weight: 800;
		    box-shadow: 3px 3px 0px 0px #E99F4C;
		}
		
		.btn:hover {
		    opacity: .9;
		}
		
		.link {
		    font-weight: 800;
		    color: #264143;
		    padding: 5px;
		}
	</style>
	<body>
		<div class="container">
		    <div class="form_area">
		        <p class="title">SIGN UP</p>
		        <form action="">
		            <div class="form_group">
		                <label class="sub_title" for="name">Name</label>
		                <input placeholder="Enter your full name" class="form_style" type="text">
		            </div>
		            <div class="form_group">
		                <label class="sub_title" for="email">Email</label>
		                <input placeholder="Enter your email" id="email" class="form_style" type="email">
		            </div>
		            <div class="form_group">
		                <label class="sub_title" for="password">Password</label>
		                <input placeholder="Enter your password" id="password" class="form_style" type="password">
		            </div>
		            <div>
		                <button class="btn">SIGN UP</button>
		                <p>Have an Account? <a class="link" href="">Login Here!</a></p><a class="link" href="">
		                </a>
		            </div><a class="link" href="">
		
		            </a>
		        </form>
		    </div><a class="link" href="">
		    </a>
		</div>
	</body>
</html>